<template>
  <div>
      <el-row>
        <el-col :span="12">
          <div class="create-div">
              <el-form ref="form" :model="form" label-width="80px" label-position="left">
                <el-form-item label="产品名称">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="类目绑定">
                  <el-select v-model="form.productClassName" placeholder="请选择产品类目">
                    <template v-for="(item,index) in productClassList">
                        <el-option :label="item.className" :value="item.className" :key="index"></el-option>
                    </template>
                  </el-select>
                </el-form-item>

                <el-form-item label="产品价格">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="form.price"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <span style="color:red;padding-left:10px;">单位RMB</span>
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="产品重量">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="form.weight"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <span style="color:red;padding-left:10px;">单位kg</span>
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="产品规格">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="form.productSize"></el-input>
                    </el-col>
                    <el-col :span="4">
                        <span style="color:red;padding-left:10px;">mm*mm*mm</span>
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="产品库存">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="form.repertoryNumber" type="number"></el-input>
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item label="产品产地">
                  <el-row>
                    <el-col :span="20">
                        <el-input v-model="form.originPlace"></el-input>
                    </el-col>
                    <el-col :span="4">
                    </el-col>
                  </el-row>
                </el-form-item>

                <el-form-item>
                  <el-button type="primary" @click="onSubmit">立即创建</el-button>
                  <el-button>取消</el-button>
                </el-form-item>
              </el-form>
          </div>
        </el-col>

        <el-col :span="12">
             <p>添加产品图片</p>
             <el-upload
                action="/api/product/addProductImg"
                list-type="picture-card"
                :on-success="fileUploadSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
             </el-upload>
        </el-col>
      </el-row>

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
  </div>
</template>

<script>
import { getProductClass, addProduct } from '@/server/index.js'
export default {
    components: {},
    data() {
       return {
          form: {
            name: '',
            productClassName: '',
            price: '',
            weight: '',
            productSize: '',
            imgUrl: '',
            repertoryNumber: '',
            originPlace: ''
          },
          dialogImageUrl: '',
          dialogVisible: false,
          productClassList:[]
       };
    },
    methods: {
      onSubmit() {
        // 表单提交
        if(this.form.productClassName){
          addProduct(this.form).then((res)=>{
            this.$message.success("添加商品成功");
          });
        }else{
            this.$message.error("商品必须绑定类目");
        }
       
      },
      handleRemove(file, fileList) {
        // 点击移除文件的钩子
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        // 点击查看文件的钩子
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      fileUploadSuccess(response, file, fileList){
        // 文件上传成功的钩子
        this.form.imgUrl = response;
      },
      getProductClassList(){
        // 获取产品类目名称
        getProductClass().then((res)=>{
            this.productClassList = res.data.data;
        });
      }
    },
    created() {
        this.getProductClassList();
    }
};
</script>

<style scoped>
.create-div{
  width:500px;
  margin:50px;
  text-align:left;
}
</style>